<template>
  <div class="commercialMessage">
    <div>
      <el-tabs v-model="tabName" type="card" @tab-click="headerTab(tabName)">
        <el-tab-pane label="总包合同" name="all"></el-tab-pane>
        <el-tab-pane label="分包合同" name="sub"></el-tab-pane>
        <el-tab-pane label="变更签证" name="testation"></el-tab-pane>
        <el-tab-pane label="成本分析" name="analysis"></el-tab-pane>
        <el-tab-pane label="收支平衡" name="payments"></el-tab-pane>
      </el-tabs>
    </div>
    <div>
      <total v-if="tabName == 'all'"></total>
      <subcontract v-if="tabName == 'sub'"></subcontract>
      <testation v-if="tabName == 'testation'"></testation>
      <analysis v-if="tabName == 'analysis'"></analysis>
      <payments v-if="tabName == 'payments'"></payments>
    </div>
  </div>
</template>
<script>
import { list } from "@/api/list";
import total from "./../comMsg/total";
import subcontract from "./../comMsg/sub";
import testation from "./../comMsg/testation";
import analysis from "./../comMsg/analysis";
import payments from "./../comMsg/payments";
export default {
  data() {
    return {
      tabName: "all",
    };
  },
  components: {
    total,
    subcontract,
    testation,
    analysis,
    payments,
  },
  async mounted() {
    this.getList();
  },
  methods: {
    getList() {
      list(this.params).then((res) => {
        // let tableData= res.data.list
        this.tableData = res.data.list;
        // this.total = data.page.total;
      });
    },
    headerTab(val, event) {
      this.tabName = val;
    },
  },
};
</script>
<style lang="scss" scoped>
.commercialMessage {
  margin: 0 20px;
}
/deep/.el-tabs__item.is-active {
  color: #28528d;
}
/deep/.el-tabs__item:hover {
  color: #28528d;
  cursor: pointer;
}
</style>